<template>
  <div>
    <div class="title">
      <h1>编 辑 信 息</h1>
    </div>
    <el-row>
      <el-col :span="8">
        <el-image :src="image">
          <div slot="error" class="image-slot">
            <div style="margin-top: 60%" />
            <i class="el-icon-picture-outline"></i>
            <span class="demonstration">商品图将会显示在这里</span>
          </div>
        </el-image>
      </el-col>
      <el-col :span="8">
        <product-form
          @save-product="updateProduct"
          :model="model"
          :manufacturers="manufacturers"
          :isEditing="true"
          v-on:previewImage="updateImagePreview"
        ></product-form>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
  </div>
</template>

<script>
import ProductForm from "@/components/products/ProductForm.vue";
export default {
  data() {
    return { image: this.$store.getters.productById(this.$route.params["id"]).image };
  },
  created() {
    const { name = "" } = this.modelData || {};
    if (!name) {
      this.$store.dispatch("productById", {
        productId: this.$route.params["id"],
      });
    }
    if (this.manufacturers.length === 0) {
      this.$store.dispatch("allManufacturers");
    }
    this.image = this.model.image;
    console.log(this.image);
  },
  computed: {
    manufacturers() {
      return this.$store.getters.allManufacturers;
    },
    model() {
      const product = this.$store.getters.productById(this.$route.params["id"]);
      const res = { ...product, manufacturer: { ...product.manufacturer } };
      return res;
    },
  },
  methods: {
    updateProduct(product) {
      this.$store.dispatch("updateProduct", {
        product,
      });
    },
    updateImagePreview(imgAddr) {
      this.image = imgAddr;
    },
  },
  components: {
    "product-form": ProductForm,
  },
};
</script>